/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, TextArea, InputLine, CCell, Table, TableRow, TableBody, Cell, LineColumn, Input,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, RepLink, useItemInputControl,} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

const itemA防腐层: string[] = ['入土端腐','露管端腐','阀室管腐','防腐备注',  '起始位','终止位'];
const itemExcl = ['起始位', '终止位'];
const exclSet = new Set(itemExcl);
export  const itemA防腐温 = itemA防腐层.filter(item => !exclSet.has(item));
//防腐层
//起止位置 : 在资料审查中有2个字段， 可是‘资料审查’也不是必选的录入页啊，关联？[['起始位置', '起始位'],  [['终止位置', '终止位'],
export const Anticorrosive =
React.forwardRef((
    {children, show, alone = true, refWidth, label, }: InternalItemProps, ref
) => {
    const {inp, setInp} = useItemInputControl({ref});
    const [getInpFilter] = useMeasureInpFilter(null, itemA防腐层,);
    return (
    <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                         alone={alone} label={label!}>
        <Text variant="h5">{label}：</Text>
        <Text variant="h6">起止位置：</Text>
        <LineColumn>
            <InputLine  label='起始位置' >
                <Input  value={inp?.起始位 ||''}
                        onChange={e => setInp({ ...inp, 起始位: e.currentTarget.value}) } />
            </InputLine>
            <InputLine  label='终止位置' >
                <Input  value={inp?.终止位 ||''}
                        onChange={e => setInp({ ...inp, 终止位: e.currentTarget.value}) } />
            </InputLine>
        </LineColumn>
        <Text variant="h5">管道入土端和出土端防腐（保温）层完好情况</Text>
        <TextArea  value={inp?.入土端腐 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 入土端腐: e.currentTarget.value||undefined}) } />
        <Text variant="h5">露管端防腐（保温）层完好情况</Text>
        <TextArea  value={inp?.露管端腐 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 露管端腐: e.currentTarget.value||undefined}) } />
        <Text variant="h5">阀室内管道防腐（保温）层完好情况</Text>
        <TextArea  value={inp?.阀室管腐 ||''} rows={8}
                   onChange={e => setInp({ ...inp, 阀室管腐: e.currentTarget.value||undefined}) } />
        <Text variant="h5">备注：</Text>
        <TextArea  value={inp?.防腐备注 ||''} rows={6}
                   onChange={e => setInp({ ...inp, 防腐备注: e.currentTarget.value||undefined}) } />
        {children}
    </InspectRecordLayout>
    );
});

export const AnticorrosiveVw= ({orc, rep,op} :{orc:any, rep:any,op?:boolean}
) => {
    return <>
        <div css={{"@media print": {paddingBottom: '6rem', pageBreakInside: 'avoid'}} }>
            <Text id='Anticorrosive' variant="h2" css={{textAlign: 'center', marginTop: '1rem',
            }}>防腐(保温)层检查{op?'记录':'报告'}</Text>
            <div css={{display: 'flex', justifyContent: 'space-between'}}>
                <Text></Text>
                <Text>{op?'记录':'报告'}编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={ ["15%", "%"] } css={{borderCollapse: 'collapse', "@media print": {marginTop: '-6rem'}}} tight  miniw={800}>
            <TableBody>
                <RepLink rep={rep} tag={'Anticorrosive'}>
                    <TableRow>
                        <CCell>管道名称</CCell><CCell>{orc?.管道设备名}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>起止位置</CCell><CCell>{orc?.起始位 || '／'}&nbsp; - &nbsp;{orc?.终止位 || '／'}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>管道入土端和出土端防腐（保温）层完好情况</CCell>
                        <Cell css={{whiteSpace: 'pre-wrap'}}>{orc?.入土端腐 || '／'}</Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>露管端防腐（保温）层完好情况</CCell>
                        <Cell css={{whiteSpace: 'pre-wrap'}}>{orc?.露管端腐 ?? '／'}</Cell>
                    </TableRow>
                    <TableRow>
                        <CCell>阀室内管道防腐（保温）层完好情况</CCell>
                        <Cell css={{whiteSpace: 'pre-wrap'}}>{orc?.阀室管腐 ?? '／'}</Cell>
                    </TableRow>
                    <TableRow>
                        <Cell colSpan={2}><div css={{minHeight: '1rem', whiteSpace: 'pre-wrap'}}>
                            备注：<br/>
                            {orc.防腐备注 ?? '／'}</div></Cell>
                    </TableRow>
                </RepLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck cap={'检查'} orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}/>
    </>;
};
